import React from 'react';
import moment from 'moment'
import $ from 'jquery';
import { Carousel, message, Breadcrumb, Icon, DatePicker, Input, Col, Row, Button, Table, Modal, Upload, TimePicker, Form, InputNumber } from 'antd';
import './banner.less';
import Config from '../../common/config';
const config = new Config();
const { Column } = Table;
const InputGroup = Input.Group;
const FormItem = Form.Item;
const token = sessionStorage.getItem('token')
class Banner extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			collapsed: false, //菜单折叠状态
			mode: 'inline', //菜单显示模式，垂直 or 行内
			searchActivityName: '',//活动名称搜索栏
			searchDate: null,//日期搜索栏
			searchResult: [],//查询结果
			//新建模态框
			visible: false,//模态框可见性
			uploadImgUrl: '',//上传图片的地址
			fileList: [],//上传图片的展示
			imgVisible: false,//图片预览模态框
			previewImage: '',//预览的图片
			//详情模态框
			detail_visible: false,//模态框可见性
			detail_record: null, //详情
			detailEdite: false,//详情是否可编辑
			dataState: '',//数据状态
			preView: false,//首页预览模态框
			bannerList: [],//轮播图
			recommend: null,//商品推荐
			floor: [],//楼层管理
		}
	}
	//渲染前加载数据
	componentWillMount() {
		Promise.all([
			this.getList(),
			this.dataState()
		])
	}

	// 获取轮播图列表
	getList() {
		$.ajax({
			url: config.JuseHomepage + '/bannerApp/list',
			type: 'GET',
			headers: {
				Authorization: 'Bearer ' + token,
			},
			data: {
				activityName: this.state.searchActivityName,
				date: this.state.searchDate ? Date.parse(this.state.searchDate.format('YYYY-MM-DD')) : ''
			},
			success: (data) => {
				if (data.code === 200) {
					this.setState({
						searchResult: data.data,
					});
				}
			},
		});
	}

	//同步数据状态
	dataState() {
		$.ajax({
			url: config.JuseHomepage + '/sync/dataState',
			type: 'GET',
			traditional: true,
			dataType: 'json',
			headers: {
				Authorization: 'Bearer ' + token,
			},
			success: (data) => {
				if (data.code === 200) {
					this.setState({
						dataState: data.mes
					});
				} else {
					this.setState({
						dataState: '请求失败'
					});
				}
			},
		})
	}
	//更改查询活动名称
	searchActivityNameOnBlur(e) {
		this.state.searchActivityName = e.target.value;
	}
	//更改查询日期
	searchDateoOnChange(date, dateString) {
		this.setState({
			searchDate: date
		})
	}
	//点击查询
	searchOnClick() {
		this.getList()
	}
	//重置查询
	searchReset() {
		this.refs.activityName.refs.input.value = '';
		this.state.searchActivityName = '';
		this.state.searchDate='';
		this.getList()
	}

	//新建记录的模态框显示
	showModal() {
		this.setState({
			visible: true,
		});
	}
	//新建记录的模态框取消
	handleCancel(e) {
		this.setState({
			visible: false,
		});
	}

	//上传的图片的预览模态框取消
	imgCancel() {
		this.setState({ imgVisible: false })
	}
	//上传的图片的预览
	imgPreview(file) {
		this.setState({
			previewImage: file.url || file.thumbUrl,
			imgVisible: true,
		});
	}
	//上传图片的更改
	uploadChange(info) {
		this.setState({
			fileList: info.fileList
		})
	}
	//表单验证
	//取消
	formCancel(resetFields) {
		this.setState({
			visible: false,
			fileList: []
		});
		resetFields();
	}
	//创建
	formCreate(e) {
		e.preventDefault();
		this.props.form.validateFields((err, values) => {
			if (!err) {
				if (values.effectTime) { values.effectTime = values.effectTime.format("X") + "000"; }
				if (values.lostEffectTime) { values.lostEffectTime = values.lostEffectTime.format("X") + "000"; }
				$.ajax({
					url: config.JuseHomepage + '/bannerApp/add',
					type: 'POST',
					headers: {
						Authorization: 'Bearer ' + token,
					},
					data: values,
				}).then(data => {
					if (data.code === 200) {
						message.info("创建成功")
						this.setState({
							visible: false,
							fileList: [],
							dataState: "数据未同步"
						});
						this.searchOnClick()
					} else {
						message.info(data.mes)
					}
				})
			}
		});
	}
	//传文件时取值
	normFile(info) {
		if (info.file.status === 'done') {
			if (info.file.response.code == 200) {
				return info.file.response.data
			}
		}
		return null
	}
	//图片编号改变时验证
	orderOnChange(value) {
		$.ajax({
			url: config.JuseHomepage + '/bannerApp/order',
			type: 'GET',
			headers: {
				Authorization: 'Bearer ' + token,
			},
			data: { orderNumber: value },
			success: data => {
				if (data.code === 201) {
					this.props.form.setFields({
						orderNumber: {
							value: value, errors: [new Error('已存在的编码')]
						}
					})
				}
			},
		});
	}
	//图片编号更新时验证
	orderUpdate(value) {
		$.ajax({
			url: config.JuseHomepage + '/bannerApp/orderUpdate',
			type: 'GET',
			headers: {
				Authorization: 'Bearer ' + token,
			},
			data: {
				orderNumber: value,
				id: this.state.detail_record.id
			},
			success: data => {
				if (data.code === 201) {
					this.props.form.setFields({
						orderNumber: {
							value: value, errors: [new Error('已存在的编码')]
						}
					})
				}
			},
		});
	}
	//点击详情按钮时回调
	detailShow(record) {
		this.state.detail_record = record
		this.setState({
			detail_visible: true,
			fileList: [{
				uid: -1,
				name: this.state.detail_record.imgAdress,
				status: 'done',
				url: config.Filepath + this.state.detail_record.imgAdress
			}]
		})
	}
	//点击详情页返回按钮回调
	detailModelBack(resetFields) {
		this.setState({
			detail_visible: false,
			fileList: [],
			detailEdite: false
		});
		resetFields();
	}
	//点击编辑按钮时回调
	detailEdite(setFieldsValue) {
		setFieldsValue({ ['imgAdress']: this.state.detail_record.imgAdress })
		this.setState({
			detailEdite: true,
		});
	}
	detailOnRemove() {
		if (this.state.detailEdite) {
			return true
		} else {
			return false
		}
	}
	//更新
	update(e) {
		e.preventDefault();
		this.props.form.validateFields((err, values) => {
			if (!err) {
				if (values.effectTime) { values.effectTime = values.effectTime.format("X") + "000"; }
				if (values.lostEffectTime) { values.lostEffectTime = values.lostEffectTime.format("X") + "000"; }
				values.id = this.state.detail_record.id;
				$.ajax({
					url: config.JuseHomepage + '/bannerApp/update',
					type: 'POST',
					traditional: true,
					dataType: 'json',
					headers: {
						Authorization: 'Bearer ' + token,
					},
					data: values,
				}).then(data => {
					if (data.code === 200) {
						message.info("更新成功")
						this.setState({
							detail_visible: false,
							fileList: [],
							detailEdite: false,
							dataState: "数据未同步"
						});
						this.searchOnClick()
					} else {
						message.info(data.mes)
					}
				})
			}
		});
	}
	//删除
	deleteBanner(record) {
		if(record.state=="展示中"){
            message.info("展示中无法删除");
			return;
		}
		$.ajax({
			url: config.JuseHomepage + '/bannerApp/delete',
			type: 'POST',
			headers: {
				Authorization: 'Bearer ' + token,
			},
			data: { id: record.id },
		}).then(data => {
			if (data.code === 200) {
				message.info("删除成功")
				this.setState({
					detail_visible: false,
					fileList: [],
					detailEdite: false,
					dataState: "数据未同步"
				});
				this.searchOnClick()
			} else {
				message.info(data.mes)
			}
		})
	}
	//首页生成
	sync() {
		$.ajax({
			url: config.JuseHomepage + '/sync/sync',
			type: 'POST',
			traditional: true,
			dataType: 'json',
			headers: {
				Authorization: 'Bearer ' + token,
			},
		}).then(data => {
			if (data.code === 200) {
				message.info("同步成功")
				this.setState({
					dataState: "数据已同步"
				})
			} else {
				message.info(data.mes)
			}
		})
	}
	//首页预览
	preView() {
		// this.setState({ preView: true })
		$.ajax({
			url: config.JuseHomepage + '/sync/home',
			type: 'GET',
			traditional: true,
			dataType: 'json',
			headers: {
				Authorization: 'Bearer ' + token,
			},
		}).then(data => {
			console.log('首页预览', data)
			if (data.code === 200) {
				this.setState({
					bannerList: data.banner,
					recommend: data.recommend,
					floor: data.floor,
					preView: true
				})
			} else {
				message.info(data.mes)
			}
		})
	}
	//取消首页预览
	preViewCancel() {
		console.log(1)
		this.setState({
			preView: false
		})
		console.log(this.state.preView)
	}
	//渲染组件
	render() {
		const formItemLayout = {
			labelCol: { span: 8 },
			wrapperCol: { span: 8 },
		};
		const columns = [
			{
				title: '序号',
				dataIndex: 'key',
				key: 'order',
			},
			{
				title: '排序',
				dataIndex: 'orderNumber',
				key: 'orderNumber',
			},
			{
				title: '活动名称',
				dataIndex: 'activityName',
				key: 'activityName',
			},
			{
				title: '图片',
				dataIndex: 'imgAdress',
				key: 'imgAdress',
				render: (text, record) => {
					return <a href={config.Filepath + text + '?x-oss-process=image/resize,m_fixed,h_170,w_415'} target="_black"> <img src={config.Filepath + text + '?x-oss-process=image/resize,,m_lfit,h_40'} style={{ height: "40px", width: "auto" }} alt="" /></a>
				}
			},
			{
				title: '链接地址 ',
				dataIndex: 'linkAdress',
				key: 'linkAdress',
				render: (text, record) => {
					return <a href={text} target='_blank'>{text}</a>
				}
			},
			{
				title: '生效时间',
				dataIndex: 'effectTime',
				key: 'effectTime',
				render: (text, record) => {
					if (text) {
						return moment(Number(text)).format("YYYY-MM-DD HH:mm:ss")
					} else {
						return text
					}

				}
			},
			{
				title: '失效时间',
				dataIndex: 'lostEffectTime',
				key: 'lostEffectTime',
				render: (text, record) => {
					if (text) {
						return moment(Number(text)).format("YYYY-MM-DD HH:mm:ss")
					} else {
						return text
					}
				}
			},
			{
				title: '状态',
				dataIndex: 'state',
				key: 'state',
				render: (text, record) => {
					if (text == "待展示") {
						return <span style={{ color: 'green' }}>{text}</span>
					} else if (text == "已过期") {
						return <span style={{ color: 'red' }}>{text}</span>
					} else {
						return <span>{text}</span>
					}
				}
			},
			{
				title: '更新',
				dataIndex: '',
				key: 'action',
				render: (text, record) => {
					return <a href="javascript:void(0)" onClick={this.detailShow.bind(this, record)}>更新</a>
				}
			},
			{
				title: '删除',
				dataIndex: '',
				key: 'delete',
				render: (text, record) => {
					return <a href="javascript:void(0)" onClick={this.deleteBanner.bind(this, record)}>删除</a>
				}
			},
		];
		const uploadButton = (
			<div>
				<div className="ant-upload-text"><Icon type="plus" /></div>
			</div>
		);

		//详情模态框函数
		const detailForm = () => {
			const { getFieldDecorator, getFieldsError, resetFields, setFieldsValue } = this.props.form;
			if (this.state.detail_visible) {
				return (<div>
					<Modal
						visible={this.state.detail_visible}
						footer={null}
						onCancel={this.detailModelBack.bind(this, resetFields)}
						style={{ top: '10%' }}
						title='更新'
						maskClosable={false}
					>
						<Form layout="inline" onSubmit={this.update.bind(this)} className="my_createform">
							<FormItem {...formItemLayout} label="活动名称">
								{getFieldDecorator('activityName', {
									rules: [{ required: true, max: 10, message: '请输入活动名称!' }],
									initialValue: this.state.detail_record.activityName
								})(
									< Input placeholder="请输入活动名称" maxLength="10" style={{ width: '150%' }} disabled={!this.state.detailEdite} />
								)
								}
							</FormItem>
							<FormItem {...formItemLayout} label="链接地址">
								{getFieldDecorator('linkAdress', {
									rules: [{ required: true, message: '请输入链接地址!' }],
									initialValue: this.state.detail_record.linkAdress
								})(
									< Input placeholder="请输入链接地址" style={{ width: '150%' }} disabled={!this.state.detailEdite} />
								)
								}
							</FormItem>
							<FormItem {...formItemLayout} label="排&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;序">
								{getFieldDecorator('orderNumber', {
									rules: [{ required: true, pattern: /^\d*$/, message: '请输入排序号!', }],
									initialValue: this.state.detail_record.orderNumber
								})(
									<InputNumber
										placeholder="请输入排序号"
										min={1}
										onChange={this.orderUpdate.bind(this)}
										style={{ width: '150%' }}
										disabled={!this.state.detailEdite}
									/>
								)
								}
							</FormItem>
							<FormItem {...formItemLayout} label="&nbsp;&nbsp;&nbsp;生效时间">
								{getFieldDecorator('effectTime', {
									initialValue: this.state.detail_record.effectTime ? moment(Number(this.state.detail_record.effectTime)) : null
								})(
									< DatePicker
										placeholder="选择生效时间"
										showTime={{ defaultValue: moment("00:00:00", "HH:mm:ss") }}
										format="YYYY-MM-DD HH:mm:ss"
										style={{ width: '150%' }}
										disabled={!this.state.detailEdite}
									/>
								)
								}
							</FormItem>
							<FormItem {...formItemLayout} label="&nbsp;&nbsp;&nbsp;失效时间">
								{getFieldDecorator('lostEffectTime', {
									initialValue: this.state.detail_record.lostEffectTime ? moment(Number(this.state.detail_record.lostEffectTime)) : null
								})(
									< DatePicker
										placeholder="选择失效时间"
										showTime={{ defaultValue: moment("00:00:00", "HH:mm:ss") }}
										format="YYYY-MM-DD HH:mm:ss"
										style={{ width: '150%' }}
										disabled={!this.state.detailEdite}
									/>
								)
								}
							</FormItem>
							<FormItem {...formItemLayout} label="上传图片" >
								<div className="clearfix">
									{getFieldDecorator('imgAdress', {
										rules: [{ required: true, message: '上传图片!' }],
										valuePropName: 'imgAdress',
										getValueFromEvent: this.normFile.bind(this)
									})(
										<Upload
											className='my_formupload'
											name='img'
											action={config.UploadFile + "/img"}
											listType="picture-card"
											fileList={this.state.fileList}
											onPreview={this.imgPreview.bind(this)}
											onChange={this.uploadChange.bind(this)}
											showUploadList={true}
											onRemove={this.detailOnRemove.bind(this)}
										>
											{this.state.fileList.length >= 1 ? null : uploadButton}
										</Upload>
									)
									}
									<p style={{ textAlign: 'left' }}>轮播图尺寸: 415*170</p>
									<Modal visible={this.state.imgVisible} footer={null} onCancel={this.imgCancel.bind(this)} className="wx_banner_imgModel">
										<img alt="your img" style={{ width: '100%' }} src={this.state.previewImage} />
									</Modal>
								</div>
							</FormItem>
							<FormItem  className='my_formbutton'>
								<Button type="primary"
									htmlType="submit"
									style={this.state.detailEdite ? { marginLeft: 160 } : { marginLeft: 160, display: "none" }}
								>更新</Button>
								<Button
									type="primary"
									onClick={this.detailEdite.bind(this, setFieldsValue)} style={this.state.detailEdite ? { marginLeft: 160, display: "none" } : { marginLeft: 160 }}
								>编辑</Button>
								<Button onClick={this.detailModelBack.bind(this, resetFields)}>返回</Button>
							</FormItem>
						</Form>
					</Modal>
				</div>)
			}
		}
		const createForm = () => {
			const { getFieldDecorator, getFieldsError, resetFields } = this.props.form;
			if (this.state.visible) {
				return <div>
					<Modal
						title="轮播图新增"
						visible={this.state.visible}
						footer={null}
						onCancel={this.handleCancel.bind(this)}
						style={{ top: '10%' }}
					>
						<Form {...formItemLayout} layout="inline" onSubmit={this.formCreate.bind(this)} className="my_createform">
							<FormItem {...formItemLayout} label="活动名称">
								{getFieldDecorator('activityName', {
									rules: [{ required: true, max: 10, message: '请输入活动名称!' }],
								})(
									< Input placeholder="请输入活动名称" maxLength="10" style={{ width: '150%' }} />
								)
								}
							</FormItem>
							<FormItem {...formItemLayout} label="链接地址">
								{getFieldDecorator('linkAdress', {
									rules: [{ required: true, message: '请输入链接地址!' }],
								})(
									< Input placeholder="请输入链接地址" style={{ width: '150%' }} />
								)
								}
							</FormItem>
							<FormItem {...formItemLayout} label="排&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;序">
								{getFieldDecorator('orderNumber', {
									rules: [{ required: true, pattern: /^\d*$/, message: '请输入排序号!', }],
								})(
									<InputNumber placeholder="请输入排序号" min={1} onChange={this.orderOnChange.bind(this)} style={{ width: '150%' }} />
								)
								}
							</FormItem>
							<FormItem {...formItemLayout} label="&nbsp;&nbsp;&nbsp;生效时间">
								{getFieldDecorator('effectTime', {})(
									< DatePicker
										placeholder="选择生效时间"
										showTime={{ defaultValue: moment("00:00:00", "HH:mm:ss") }}
										format="YYYY-MM-DD HH:mm:ss"
										style={{ width: '150%' }}
									/>
								)
								}
							</FormItem>
							<FormItem {...formItemLayout} label="&nbsp;&nbsp;&nbsp;失效时间">
								{getFieldDecorator('lostEffectTime', {})(
									< DatePicker
										placeholder="选择失效时间"
										showTime={{ defaultValue: moment("00:00:00", "HH:mm:ss") }}
										format="YYYY-MM-DD HH:mm:ss"
										style={{ width: '150%' }}
									/>
								)
								}
							</FormItem>
							<FormItem {...formItemLayout} label="上传图片">
								<div className="clearfix">
									{getFieldDecorator('imgAdress', {
										rules: [{ required: true, message: '请上传图片!' }],
										valuePropName: 'imgAdress',
										getValueFromEvent: this.normFile.bind(this)
									})(
										<Upload
											className='my_formupload'
											name='img'
											action={config.UploadFile + "/img"}
											listType="picture-card"
											fileList={this.state.fileList}
											onPreview={this.imgPreview.bind(this)}
											onChange={this.uploadChange.bind(this)}
											showUploadList={true}
										>
											{this.state.fileList.length >= 1 ? null : uploadButton}
										</Upload>
									)
									}
									<p style={{ textAlign: 'center' }}>轮播图尺寸: 415*170</p>
									<Modal visible={this.state.imgVisible} footer={null} onCancel={this.imgCancel.bind(this)} className="wx_floor_imgModel">
										<img alt="your img" style={{ width: '100%' }} src={this.state.previewImage} />
									</Modal>
								</div>
							</FormItem>
							<FormItem className='my_formbutton'>
								<Button type="primary" htmlType="submit" style={{ marginLeft: 160 }}>创建</Button>
								<Button onClick={this.formCancel.bind(this, resetFields)}>取消</Button>
							</FormItem>
						</Form>
					</Modal>
				</div>
			}
		}
		return (
			<div className='goods-label'>
				<div className='goods-label-cont clearfix'>
					{/*面包屑*/}
					<div className='goods-label-cont-nav clearfix'>
						< Breadcrumb separator=">" >
							<Breadcrumb.Item>首页管理</Breadcrumb.Item>
							<Breadcrumb.Item>Banner管理</Breadcrumb.Item>
						</Breadcrumb >
					</div>
					{/*搜索栏*/}
					<div className='spgl2-2 clearfix'>
						<div className='member-content-Search'>
							< Row>
								<Col span={5}>
									<div className='koa-too'>
										<Input addonBefore='活动名称' placeholder='请输入' onBlur={this.searchActivityNameOnBlur.bind(this)} ref="activityName" />
									</div>
								</Col>
								<Col span={5} offset={1}>
									<div className='koa-too koa-too1'>
										<Input addonBefore="有效时间" />
										<DatePicker style={{ width: '90%' }} onChange={this.searchDateoOnChange.bind(this)} value={this.state.searchDate} ref='date' />
									</div>
								</Col>
								<Col span={4} offset={1}>
									<Button.Group size="default" >
										<Button icon="search" style={{ marginLeft: 20, height: 40 }} onClick={this.searchOnClick.bind(this)}>搜索</Button>
										<Button icon="sync" style={{ height: 40 }} onClick={this.searchReset.bind(this)}>重置</Button>
									</Button.Group>
								</Col>
								<Col span={4} >
									<Button.Group size="default" >
										<Button icon="search" style={{ height: 40 }} onClick={this.preView.bind(this)}>首页预览</Button>
										<Button style={{ height: 40 }} onClick={this.sync.bind(this)}>首页生成</Button>
									</Button.Group>
								</Col>
								<Col span={3} offset={1}>
									<div style={{ height: 40, lineHeight: '40px' }}>	数据状态:&nbsp;&nbsp;&nbsp;<span style={this.state.dataState == "数据已同步" ? { color: "green" } : { color: "red" }}>{this.state.dataState}</span></div>
								</Col>
							</Row >
						</div>
					</div>
					<div className='allgoods-table clearfix'>
						<Table columns={columns} bordered className="floor-table" dataSource={this.state.searchResult} />
					</div>
					{/* 新建模态框 */}
					<div className='goods-label-tabletr'>
						<Button className='goods-label-table-app' width={160} icon="plus" onClick={this.showModal.bind(this)}>新增</Button>
					</div>
					{createForm()}
					{/* 详情模态框 */}
					{detailForm()}
					{/* 首页预览 */}
					<Modal visible={this.state.preView} onCancel={this.preViewCancel.bind(this)} footer={null} className='preViewModel'>
						<div>
							<div>
								<Input.Search placeholder="999感冒灵">
								</Input.Search>
								{/* 轮播 */}
								<Carousel autoplay dots={false}>
									{
										this.state.bannerList.map((value, index) => {
											return <div key={index}>
												<div>
													<a href={value.linkAdress} target="_blank">
														<img src={`${config.Filepath}${value.imgAdress}`} style={{ width: '100%' }} />
													</a>
												</div>
											</div>
										})
									}
								</Carousel>
								{/* 推荐 */}
								{
									this.state.recommend ?
										(<Row>
											<p style={{ textAlign: 'center', fontWeight: '600', marginTop: 20, marginBottom: 20, fontSize: 14 }}>{this.state.recommend.recommendname}</p>
											{this.state.recommend.products.map((value, index) => {
												return (<Col span={8} key={index}>
													<div style={{ textAlign: 'center' }} >
														<img src={`${value.imageUrl}${value.listImage}?x-oss-process=image/resize,m_fixed,h_100,w_100`} style={{ width: '80%' }} />
													</div>
													<p style={{ textAlign: 'center' }}>{value.genericName}</p>
													<p style={{ textAlign: 'center', color: 'red', fontWeight: '600' }}>{value.marketPrice}</p>
												</Col>)
											})}
										</Row>)
										: ''
								}
							</div>
							<p style={{ position: 'relative', background: '#aaa', lineHeight: '16px', textAlign: 'center', top: -70 }}>下拉加载更多</p>
							{/* 楼层 */}
							<div style={{ minHeight: 630 }}>
								{
									this.state.floor.map((value, index) => {
										return (<Row key={index} style={{ marginBottom: 10 }}>
											<p style={{ textAlign: 'center', fontWeight: '600', marginTop: 10, marginBottom: 10, fontSize: 14 }}>{value.floorname}</p>
											<p style={{ textAlign: 'center', marginBottom: 10 }}>{value.floorname}</p>
											<Col span={24} style={{ marginBottom: 10 }} >
												<a href={value.link} target="_blank">
													<div style={{ textAlign: 'center' }} >
														<img src={`${config.Filepath}${value.imgname}`} style={{ width: '90%', maxHeight: 170 }} />
													</div>
												</a>
											</Col>
											{value.floorproducts.map((value, index) => {
												return (<Col span={8} key={index + 'a'}>
													<div style={{ textAlign: 'center' }} >
														<img src={`${value.imageUrl}${value.listImage}?x-oss-process=image/resize,m_fixed,h_100,w_100`} style={{ width: '90%' }} />
													</div>
													<p style={{ textAlign: 'center' }}>{value.genericName}</p>
													<p style={{ textAlign: 'center', color: 'red', fontWeight: '600' }}>{value.marketPrice}</p>
												</Col>)
											})}
										</Row>)
									})
								}
							</div>
							<div style={{ height: 62, width: 370, backgroundColor: '#fff', position: 'absolute', bottom: 20, left: 20 }}>
								<img src='src/images/footer.png' style={{ width: 348 }} />
							</div>
						</div>
					</Modal>
				</div>
			</div >
		)
	}
}
export default Form.create()(Banner)